<template>
  <div class="">
    money {{ money }} car {{ car }}
    <button @click="clickMe">传值给父组件</button>
  </div>
</template>

<script lang="ts" setup>
// js写法
// const props = defineProps({
//   money: {
//     type: Number, // vue中类型大写
//     required: true
//   },
//   car: {
//     type: String,
//     required: false,
//     default: '宝马'
//   }
// })

// ts
// ts中基本类型小写
// 这种写法，无法指定默认值
// const props = defineProps<{ money: number; car?: string }>()

// 默认值指定写法1（用得很少）
// const props = withDefaults(defineProps<{ money: number; car?: string }>(), {
//   car: '奔驰'
// })

// 默认值指定写法2（用得多）
const { money, car = '马自达' } = defineProps<{
  money: number
  car?: string
}>()

console.log('---money---car', money, car)

// js
// const emit = defineEmits(['changeMoney', 'changeCar'])
const emit = defineEmits<{
  /**
   * 参数1：e是固定写法
   * 参数2：val可变，但是我们这里是明确传参的类型
   */
  (e: 'changeMoney', val: number): void
  (e: 'changeCar', val: string): void
}>()

const clickMe = () => {
  emit('changeMoney', 900000000)
  emit('changeCar', '劳斯莱斯')
}
</script>

<style scoped></style>
